import React, { Component,Fragment } from 'react';
import './style.css'
class OrderItem extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            commentValue: props.data.comment || '',
            starValue: props.data.star || 0,
         }
    }
    handleCommentValueChange = (e) => {
        console.log(e.target.value)
     this.setState({
         commentValue: e.target.value
     })
    }

    handleClickStar = (item) => {
     this.setState({
        starValue: item
     })
    }

    // resetDataCommentStar = () =>{
    //     this.setState( (state, props) => ({
    //         commentValue: props.data.comment || '',
    //         starValue: props.data.star || 0
    //     }))
    // }


    renderStars() {
        return (
            <div style={{marginBottom:'10px'}}>
                {[1,2,3,4,5].map(item => 
                    {
                        return <span key={item} onClick={()=> this.handleClickStar(item)} className={item<=this.state.starValue? "orderItem__star--light": ''}>★</span>
                    }
                )}
            </div>
        )
    }

    render() { 
        
        let {id, shop, picture, product, price, ifCommented, isEdit} = this.props.data;
        let {handleOpenEditArea,handleCommentSubmit,handleCommentCancel} = this.props
        return ( 
            <Fragment>
                <div className="orderItem">
                    <div className="orderItem_picContainer">
                        <img className="orderItem__pic" src={picture} alt="PIC" />
                    </div>
                    <div className="orderItem__content">
                        <div className="orderItem__product">{product}</div>
                        <div className="orderItem__shop">{shop}</div>
                        <div className="orderItem__detail">
                            <div className="orderItem__price">{price}</div>
                            {
                                ifCommented ? <div><button className="orderItem__btn orderItem__btn--gray">评价</button></div>
                                            : <div><button className="orderItem__btn orderItem__btn--red" onClick={() =>handleOpenEditArea(id)}>评价</button></div>
                            }
                        </div>
                    </div>
                </div>
                {
                    isEdit ? 
                    <div className="orderItem__commentContainer">
                        <textarea className="orderItem__comment" onChange={this.handleCommentValueChange} value={this.state.commentValue}></textarea>
                        {this.renderStars()}
                        <button className="orderItem__btn orderItem__btn--red" onClick={() =>handleCommentSubmit(this.state.commentValue,this.state.starValue,id)}>提交</button>
                        <button className="orderItem__btn orderItem__btn--grey" onClick={() =>handleCommentCancel(this.props.data.comment,this.props.data.star,id)} >取消</button>
                    </div>
                    : ''
                }
            </Fragment>
            
        );
    }
}
 
export default OrderItem;